import React,{Fragment,useState, useEffect} from 'react'
import Head from 'next/head'
import Axios from 'axios'
import { Row,Col,Card,Icon,List,Breadcrumb } from 'antd'
import Header from '../components/Header'
import Author from '../components/Author'
import Advert from '../components/Advert'
import marked from 'marked'
import hljs from 'highlight.js'
import '../public/style/index.less'
import '../public/style/pages/list.less'
import 'highlight.js/styles/monokai-sublime.css'
import Footer from '../components/Footer'
import {servicePath} from '../config/apiUrl'

const BreadcrumbItem = Breadcrumb.Item;
const ArticleList = (props) => {
  const [myList,setMyList] = useState([])
  useEffect(()=>{
    setMyList(props.data)
  },[props.data])
  const renderer = new marked.Renderer()
  marked.setOptions({
    renderer:renderer,
    gfm:true,//启动类似github样式的markdown，填写markdownd的错误
    sanitizer:false,//原始输出，忽略html标签
    tables:true,//
    breaks:true,//
    smertLists:true,
    highlight:function(code){
      return hljs.highlightAuto(code).value
    }

  })
  return (<Fragment>
    <Head>
      <title>ArticleList</title>
      <link rel="icon" href="/favicon.ico" />
    </Head>
    <Header/>
    <Row className="comm-main" type="flex" justify="center" >
        <Col className="comm-left" xs={23} sm={23} md={18} lg={14} xl={13} >
            <div>
                <Breadcrumb className="comm-div">
                  <BreadcrumbItem><a href="/">首页</a></BreadcrumbItem>
                  <BreadcrumbItem><a href="">列表</a></BreadcrumbItem>
                </Breadcrumb>
                <List
                  itemLayout="vertical"
                  dataSource={myList}
                  renderItem={item => (
                    <List.Item>
                      <div className="list-title">{item.title}</div>
                      <div className="list-icon">
                        <span><Icon type="calendar" /> {item.addTime}</span>
                        <span><Icon type="folder" /> {item.typeName}</span>
                        <span><Icon type="fire" /> {item.view_count}人</span>
                      </div>
                      <div className="list-context" dangerouslySetInnerHTML={{__html:marked(item.introduce)}}></div>
                    </List.Item>
                  )}
                />
            </div>
        </Col>
        <Col className="comm-right" xs={0} sm={0} md={5} lg={4} xl={5} >
          <Author/>
          <Advert/>
        </Col>
    </Row>
    <Footer/>
  </Fragment>)
}
ArticleList.getInitialProps = async (context)=>{
  let id= context.query.id;
  console.log(servicePath.getListById)
  const promise = new Promise((resolve)=>{
    Axios(servicePath.getListById+id).then(res=>{
      resolve(res.data)
    })
  })
  return await promise
}

export default ArticleList
